<template>
  <div class="app-container home">
    <searchForm
      class="searchMain"
      size="medium"
      :isHandle="isHandle"
      :label-width="labelWidth"
      :label-position="labelPosition"
      :search-data="searchData"
      :search-form="searchForm"
      :search-handle="searchHandle"
    >
    </searchForm>
    <el-row style="margin-bottom: 20px">
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="newlyForm"
        v-hasPermi="['mine:info:add']"
        >新增</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-download"
        @click="handleDownload"
        v-hasPermi="['mine:info:export']"
        >导出</el-button
      >
    </el-row>
    <tableForm
      class="tableForm"
      :columObj="columObj"
      :pageObj="pageObj"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
      <template v-slot:operation="scopeVal">
        <el-button
          type="text"
          size="medium"
          @click="edit(scopeVal.scope.row)"
          v-hasPermi="['mine:info:edit']"
          >更新</el-button
        >
        <el-button type="text" size="medium" @click="detail(scopeVal.scope.row)"
          >详情</el-button
        >
      </template>
    </tableForm>

    <!-- 新增 -->
    <baseDialog
      :popObj="popObj"
      @cancelPop="cancelPop"
      @confirmPop="confirmPop"
    >
      <baseForm
        ref="addForm"
        :source="addFormData"
        :config="addConfig()"
        :rules="addFormRules"
      >
      </baseForm>
    </baseDialog>

    <!-- 导出选择框 -->
    <baseDialog
      :popObj="popDown"
      @cancelPop="cancelDown"
      @confirmPop="confirmDown"
    >
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
        >全选</el-checkbox
      >
      <div style="margin: 15px 0"></div>
      <el-checkbox-group v-model="checkList" @change="handleCheckChange">
        <el-checkbox
          v-for="check in checks"
          :label="check.value"
          :key="check.value"
          style="width: 90px"
          >{{ check.label }}</el-checkbox
        >
      </el-checkbox-group>
    </baseDialog>
  </div>
</template>

<script>
import {
  getMineInfoListServe,
  addUpdateMineInfoServe,
  updateInfo,
} from "@/api/mineInfo";
const checksOptions = [
  { value: "mine", label: "矿名称" },
  { value: "mineType", label: "矿类型" },
  { value: "address", label: "矿地址" },
  { value: "manager", label: "矿长" },
  { value: "chiefEngineer", label: "总工程师" },
  { value: "produceManager", label: "生产副矿长" },
  { value: "deputyManager", label: "安全副矿长" },
  { value: "electromechanical", label: "机电副矿长" },
  { value: "safetyDirector", label: "安全总监" },
  { value: "mineScore", label: "矿计分值" },
  { value: "illegalRecords", label: "违法记录" },
];
const mineTypeEnum = {
  1: "煤矿",
  2: "金属矿",
  3: "非金属矿",
};
import tableForm from "../../components/baseTable/index.vue";
import searchForm from "../../components/baseSearchForm/index.vue";
import baseForm from "../../components/baseForm/index.vue";
import baseDialog from "../../components/baseDialog/index.vue";

export default {
  name: "Index",
  components: {
    tableForm,
    searchForm,
    baseForm,
    baseDialog,
  },
  data() {
    return {
      isHandle: true,
      labelWidth: "100px",
      labelPosition: "right",
      name: "砂墩子",
      searchData: {
        // 查询参数
        mineName: "",
        mineType: "",
        mineManager: "",
      },
      searchForm: [
        {
          type: "Input",
          label: "矿名称",
          prop: "mineName",
          placeholder: "请输入",
        },
        {
          type: "Select",
          label: "矿类型",
          prop: "mineType",
          placeholder: "请选择",
          options: [
            { value: 1, label: "煤矿" },
            { value: 2, label: "金属矿" },
            { value: 3, label: "非金属矿" },
          ],
        },
        {
          type: "Input",
          label: "矿长",
          prop: "mineManager",
          placeholder: "请输入",
        },
        // {
        //   type: "daterange",
        //   label: "日期",
        //   prop: "dataTime",
        //   placeholder: "请选择",
        // },
      ],
      searchHandle: [
        // {
        //   label: "新增",
        //   type: "plain",
        //   icon: "el-icon-plus",
        //   handle: this.newlyForm,
        // },
        {
          label: "查询",
          type: "primary",
          icon: "el-icon-search",
          handle: this.handleSearch,
        },
        // {
        //   label: "导出",
        //   type: "primary",
        //   icon: "el-icon-download",
        //   handle: this.handleDownload,
        // },
      ],
      columObj: {
        // 选择框
        loading: false, //是否加载
        isSerial: true, //是否需要序列
        isSelect: false, //是否需要复选框
        isPagination: true, //是否需要分页
        isOperation: true, //是否需要操作栏
        tableData: [], //表格数据来源
        tableCol: [
          {
            label: "矿名称",
            prop: "mineName",
            // width:60
          },
          {
            label: "矿类型",
            prop: "mineType",
            // width:60,
            ownDefined: true,
            ownDefinedReturn: (row, $index) => {
              return mineTypeEnum[row.mineType];
            },
          },
          {
            label: "矿地址",
            prop: "mineAddress",
            // width:170
          },

          {
            label: "矿长",
            prop: "mineManager",
            // width:120
          },
          {
            label: "总工程师",
            prop: "mineChiefEngineer",
            // width:120
          },
          {
            label: "生产副矿长",
            prop: "mineProduceManager",
            // width:120
          },
          {
            label: "安全副矿长",
            prop: "mineDeputyManager",
            // width:120
          },
          {
            label: "机电副矿长",
            prop: "mineElectromechanical",
            // width:80
          },
          {
            label: "安全总监",
            prop: "mineSafetyDirector",
            // width:80
          },
          {
            label: "矿计分值",
            prop: "mineScore",
            // width:150
          },
          {
            label: "违法记录",
            prop: "mineIllegalRecords",
            // width:60
          },
          {
            label: "历任矿长信息",
            prop: "previousMine",
            ownDefined: true,
            ownDefinedReturn: (row, $index) => {
              return `<a>历任矿长信息</a>`;
            },
            btnClick: (row) => {
              this.$router.push({
                path: "/securityPersonnelInfo",
                query: { mine: row.mineName },
              });
            },
            color: "red",
          },
        ],
      },
      pageObj: {
        //分页对象
        total: 0,
        pageData: {
          pageNum: 1,
          pageSize: 10,
        },
      },
      isSearch: false,
      popObj: {
        popName: "addFOrm",
        dialogTitle: "更新",
        dialogVisible: false,
        popupWidth: "1000px",
        showFooter: true,
      },
      popDown: {
        popName: "download",
        dialogTitle: "导出",
        dialogVisible: false,
        popupWidth: "500px",
        showFooter: true,
      },
      addFormData: {
        mineName: "",
        mineType: "",
        mineAddress: "",
        mineManager: "",
        mineDeputyManager: "",
        mineElectromechanical: "",
        mineScore: "",
        mineIllegalRecords: "",
        mine_coordinate: "",
        mineChiefEngineer: "",
        mineProduceManager: "",
        mineSafetyDirector: "",
      },
      addFormRules: {
        mineName: [
          { required: true, message: "请输入矿名称", trigger: "blur" },
        ],
        mineType: [
          { required: true, message: "请输入矿类型", trigger: "blur" },
        ],
        mineAddress: [
          {
            required: true,
            message: "格式为新疆-乌鲁木齐-米东区-详细地址",
            trigger: "blur",
          },
        ],
        mineManager: [
          { required: true, message: "请输入矿长", trigger: "blur" },
        ],
        mineDeputyManager: [
          { required: true, message: "请输入安全副矿长", trigger: "blur" },
        ],
        mineElectromechanical: [
          { required: true, message: "请输入机电副矿长", trigger: "blur" },
        ],
        mineScore: [
          { required: true, message: "请输入矿计分值", trigger: "blur" },
        ],
        mineIllegalRecords: [
          { required: true, message: "请输入违法记录", trigger: "blur" },
        ],
        mine_coordinate: [
          { required: true, message: "格式为乌鲁木齐-米东区", trigger: "blur" },
        ],
        mineChiefEngineer: [
          { required: true, message: "请输入总工程师", trigger: "blur" },
        ],
        mineProduceManager: [
          { required: true, message: "请输入生产副矿长", trigger: "blur" },
        ],
        mineSafetyDirector: [
          { required: true, message: "请输入安全总监", trigger: "blur" },
        ],
      },
      checkList: [],
      checks: checksOptions,
      checkAll: false,
      isIndeterminate: true,
      addConfig() {
        return [
          {
            key: "mineName",
            label: "矿名称：",
            component:
              this.popObj.dialogTitle == "详情" ? "innerText" : "el-input",
            span: 12,
            props: {
              placeholder: "请输入矿名称",
              clearable: true,
            },
            tips: "<template slot='append'>.com</template>",
            labelWidth: "110px",
          },
          {
            key: "mineType",
            label: "矿类型：",
            component:
              this.popObj.dialogTitle == "详情" ? "innerText" : "el-select",
            span: 12,
            props: {
              placeholder: "请输入矿类型",
              clearable: true,
              // suffixIcon:"el-icon-date",
            },
            labelWidth: "110px",
            data: [
              { value: 1, label: "煤矿" },
              { value: 2, label: "金属矿" },
              { value: 3, label: "非金属矿" },
            ],
          },
          {
            key: "mineAddress",
            label: "矿地址：",
            component:
              this.popObj.dialogTitle == "详情" ? "innerText" : "el-input",
            span: 12,
            props: {
              placeholder: "格式为新疆-乌鲁木齐-米东区-详细地址",
              clearable: true,
            },
            labelWidth: "110px",
          },
          {
            key: "mineManager",
            label: "矿长：",
            component:
              this.popObj.dialogTitle == "详情" ? "innerText" : "el-input",
            span: 12,
            props: {
              placeholder: "请输入矿长",
              clearable: true,
            },
            labelWidth: "110px",
          },
          {
            key: "mineDeputyManager",
            label: "安全副矿长：",
            component:
              this.popObj.dialogTitle == "详情" ? "innerText" : "el-input",
            span: 12,
            props: {
              placeholder: "请输入安全副矿长",
              clearable: true,
            },
            labelWidth: "110px",
          },
          {
            key: "mineElectromechanical",
            label: "机电副矿长：",
            component:
              this.popObj.dialogTitle == "详情" ? "innerText" : "el-input",
            span: 12,
            props: {
              placeholder: "请输入机电副矿长",
              clearable: true,
            },
            labelWidth: "110px",
          },
          {
            key: "mineChiefEngineer",
            label: "总工程师：",
            component:
              this.popObj.dialogTitle == "详情" ? "innerText" : "el-input",
            span: 12,
            props: {
              placeholder: "请输入总工程师",
              clearable: true,
            },
            labelWidth: "110px",
          },
          {
            key: "mineProduceManager",
            label: "生产副矿长：",
            component:
              this.popObj.dialogTitle == "详情" ? "innerText" : "el-input",
            span: 12,
            props: {
              placeholder: "请输入生产副矿长",
              clearable: true,
            },
            labelWidth: "110px",
          },
          {
            key: "mineSafetyDirector",
            label: "安全总监：",
            component:
              this.popObj.dialogTitle == "详情" ? "innerText" : "el-input",
            span: 12,
            props: {
              placeholder: "请输入安全总监",
              clearable: true,
            },
            labelWidth: "110px",
          },
          {
            key: "mineScore",
            label: "矿计分值:",
            component:
              this.popObj.dialogTitle == "详情" ? "innerText" : "el-select",
            span: 12,
            props: {
              placeholder: "请输入矿计分值",
              clearable: true,
            },
            labelWidth: "110px",
            data: [
              { value: 0, label: "0" },
              { value: 3, label: "3" },
              { value: 6, label: "6" },
              { value: 9, label: "9" },
              { value: 12, label: "12" },
            ],
          },
          {
            key: "mineIllegalRecords",
            label: "违法记录:",
            component:
              this.popObj.dialogTitle == "详情" ? "innerText" : "el-input",
            span: 12,
            props: {
              placeholder: "请输入违法记录",
              clearable: true,
            },
            labelWidth: "110px",
            type: "textarea",
          },
        ];
      },
    };
  },
  computed: {
    // 创建一个计算属性，它总是返回一个对象，包含所有你想监听的值
    watchTableParams: function () {
      return {
        pageSize: this.pageObj.pageData.pageSize,
        pageNum: this.pageObj.pageData.pageNum,
      };
    },
  },
  watch: {
    // 监听计算属性的变化，而不是直接监听数据项
    watchTableParams: {
      handler: function (newVal, oldVal) {
        this.getList();
      },
      deep: true, // 如果你的值是对象或数组，需要设置deep选项为true
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    // 获取数据列表
    getList() {
      let options = {
        pageNum: this.pageObj.pageData.pageNum,
        pageSize: this.pageObj.pageData.pageSize,
        mineName: this.searchData.mineName,
        mineType: this.searchData.mineType,
        mineManager: this.searchData.mineManager,
      };
      getMineInfoListServe(options).then((res) => {
        if (res.code == 200) {
          this.columObj.tableData = res.rows;
          this.pageObj.total = res.total;
        } else {
          this.columObj.tableData = [];
          this.$message.error("查询矿信息列表失败");
        }
      });
    },
    resetSearchForm() {
      console.log(this.$data.searchForm);
      Object.assign(this.$data.searchForm, this.$options.data().searchForm);
    },
    resetAddForm() {
      Object.assign(this.$data.addFormData, this.$options.data().addFormData);
    },
    handleCurrentChange(val) {
      this.pageObj.pageData.pageNum = val;
    },
    //条数变化
    handleSizeChange(val) {
      this.pageObj.pageData.pageSize = val;
      this.pageObj.pageNum = 1;
    },
    edit(row) {
      this.popObj.dialogTitle = "更新";
      this.popObj.dialogVisible = true;
      this.popObj.showFooter = true;
      // this.resetAddForm();
      this.addFormData = { ...row };
    },
    detail(row) {
      this.popObj.dialogTitle = "详情";
      this.popObj.dialogVisible = true;
      this.popObj.showFooter = false;

      // this.resetAddForm();
      this.addFormData = { ...row };
    },
    cancelPop() {
      this.popObj.dialogVisible = false;
      this.$refs.addForm.$refs.form.resetFields();
      this.$refs.addForm.clearValidate();
    },
    async confirmPop() {
      const valid = await this.$refs.addForm.validate();
      if (valid) {
        if (this.popObj.dialogTitle == "新增") {
          addUpdateMineInfoServe(this.addFormData).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.popObj.dialogVisible = false;
              this.getList();
            } else {
              this.popObj.dialogVisible = false;
              this.$message.error("添加失败");
            }
          });
        } else if (this.popObj.dialogTitle == "更新") {
          updateInfo(this.addFormData).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "更新成功",
                type: "success",
              });
              this.popObj.dialogVisible = false;
              this.getList();
            } else {
              this.popObj.dialogVisible = false;
              this.$message.error("更新失败");
            }
          });
        }
      }
    },
    cancelDown() {
      this.popDown.dialogVisible = false;
    },
    confirmDown() {
      this.popDown.dialogVisible = false;
    },

    handleSearch() {
      this.pageObj.pageData.pageNum = 1;
      this.getList();
    },
    handleDownload() {
      // this.popDown.dialogVisible = true;
      let params = {
        pageNum: this.pageObj.pageData.pageNum,
        pageSize: this.pageObj.pageData.pageSize,
        mineName: this.searchData.mineName,
        mineType: this.searchData.mineType,
        mineManager: this.searchData.mineManager,
      };
      this.download(
        "mine/info/export",
        {
          params,
          title: "矿信息详情表",
        },
        `矿信息${new Date().getTime()}.xlsx`
      );
    },
    handleCheckAllChange(val) {
      const check = checksOptions.map((item) => {
        return item.value;
      });
      this.checkList = val ? check : [];
      this.isIndeterminate = false;
    },
    handleCheckChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.checks.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.checks.length;
    },
    newlyForm() {
      this.popObj.dialogTitle = "新增";
      this.popObj.dialogVisible = true;
      this.popObj.showFooter = true;
      this.resetAddForm();
    },
    previousMineClcik(row) {},
  },
};
</script>

<style scoped lang="scss">
</style>